<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #table {
            width: 1000px;
            margin: 100px auto;
        }
        
        td {
            text-align: center;
            height: 40px;
        }
        
        tr:hover {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table id="table" border="1" cellspacing="0">
        <tr>
            <td>二进制</td>
            <td>八进制</td>
            <td>十进制</td>
            <td>十六进制</td>
        </tr>

    </table>
    <script>
        let table = document.querySelector('#table');
        for (let i = 0; i <= 255; i++) {
            table.innerHTML += `
            <tr>
            <td>${i.toString(2)}</td>
            <td>${i.toString(8)}</td>
            <td>${i}</td>
            <td>${i.toString(16)}</td>
        </tr>
            `
        }
    </script>
</body>

</html>